<template>
  <div>
    <view class="main">
      <view class="sound_content">
        <view class="sound_content_top">
          <!--头像区  -->
          <view class="headerPic">
            <image src="/static/images/Slice 2@2x.png" class="icon_img"></image>
          </view>
          <!--语音内容区  -->
          <view class="message">
            <!--昵称时间  -->
            <view class="top">
              <view class="nickname">小仙女</view>
              <view class="time">03-08 17:33</view>
            </view>
            <!--语音内容时长  -->
            <view class="bottom">
              <view class="voice">
                <image src="/static/images/Slice Copy 2@2x.png" class='icon_sound'></image>
                <!-- <image src="../images/Slice Copy 3@2x.png" class='icon_voice'></image> -->
              </view>

              <view class="voice_count">123</view>
            </view>
            <!--评论收听区  -->



          </view>
        </view>
        <view class="sound_content_bottom">
          <!--评论  -->
          <view class="test">
            <view class="comment">
              <view class="comm_view">
                <image src="/static/images/Slice Copy@2x.png" class="icon_comment"></image>
              </view>

              <view class="comm_view">评价</view>
            </view>
            <!--收听  -->
            <view class="listen">
              <view class="comm_view">
                <image src="/static/images/Slice@2x.png" class="icon_listen"></image>
              </view>

              <view class="comm_view">听</view>
            </view>
          </view>
        </view>
      </view>
      <view class="interval"></view>
      <view class="remind">阅后即焚，在发布语音24小时后将清空评论</view>
      <!--回复  -->
      <view class="repaly">


        <view class="my_repaly">
          <view class="my_repaly_top">
            <!--头像区  -->
            <view class="headerPic">
              <image src="/static/images/Slice 2@2x.png" class="icon_img"></image>
            </view>
            <!--语音内容区  -->
            <view class="message">
              <!--昵称时间  -->
              <view class="top">
                <view class="nickname">小仙女</view>
                <view class="time">03-08 17:33</view>
              </view>
              <!--语音内容时长  -->
              <view class="bottom">
                <view class="voice">
                  <image src="/static/images/Slice Copy 2@2x.png" class='icon_sound'></image>
                  <!-- <image src="../images/Slice Copy 3@2x.png" class='icon_voice'></image> -->
                </view>

                <view class="voice_count">123</view>
              </view>
              <!--评论收听区  -->



            </view>
          </view>

        </view>
        <!--结束  -->

        <!--我的回复  -->
        <view class="owner_repaly">
          <view class="sound_content_top">
            <!--头像区  -->
            <view class="headerPic">
              <image src="/static/images/Slice 2@2x.png" class="icon_img"></image>
            </view>
            <!--语音内容区  -->
            <view class="message">
              <!--昵称时间  -->
              <view class="top">
                <view class="nickname">小仙女</view>
                <view class="time">03-08 17:33</view>
              </view>
              <!--语音内容时长  -->
              <view class="bottom">
                <view class="voice">
                  <image src="/static/images/Slice Copy 2@2x.png" class='icon_sound'></image>
                  <!-- <image src="../images/Slice Copy 3@2x.png" class='icon_voice'></image> -->
                </view>

                <view class="voice_count">123</view>
              </view>
              <!--评论收听区  -->



            </view>
          </view>
        </view>
        <!--结束  -->




        <view class="my_repaly">
          <view class="my_repaly_top">
            <!--头像区  -->
            <view class="headerPic">
              <image src="/static/images/Slice 2@2x.png" class="icon_img"></image>
            </view>
            <!--语音内容区  -->
            <view class="message">
              <!--昵称时间  -->
              <view class="top">
                <view class="nickname">小仙女</view>
                <view class="time">03-08 17:33</view>
              </view>
              <!--语音内容时长  -->
              <view class="bottom">
                <view class="voice">
                  <image src="/static/images/Slice Copy 2@2x.png" class='icon_sound'></image>
                  <!-- <image src="../images/Slice Copy 3@2x.png" class='icon_voice'></image> -->
                </view>

                <view class="voice_count">123</view>
              </view>
              <!--评论收听区  -->



            </view>
          </view>

        </view>
        <!--结束  -->


        <view class="my_repaly">
          <view class="my_repaly_top">
            <!--头像区  -->
            <view class="headerPic">
              <image src="/static/images/Slice 2@2x.png" class="icon_img"></image>
            </view>
            <!--语音内容区  -->
            <view class="message">
              <!--昵称时间  -->
              <view class="top">
                <view class="nickname">小仙女</view>
                <view class="time">03-08 17:33</view>
              </view>
              <!--语音内容时长  -->
              <view class="bottom">
                <view class="voice">
                  <image src="/static/images/Slice Copy 2@2x.png" class='icon_sound'></image>
                  <!-- <image src="../images/Slice Copy 3@2x.png" class='icon_voice'></image> -->
                </view>

                <view class="voice_count">123</view>
              </view>
              <!--评论收听区  -->



            </view>
          </view>

        </view>
        <!--结束  -->

        <!--我的回复  -->
        <view class="owner_repaly">
          <view class="sound_content_top">
            <!--头像区  -->
            <view class="headerPic">
              <image src="/static/images/Slice 2@2x.png" class="icon_img"></image>
            </view>
            <!--语音内容区  -->
            <view class="message">
              <!--昵称时间  -->
              <view class="top">
                <view class="nickname">小仙女</view>
                <view class="time">03-08 17:33</view>
              </view>
              <!--语音内容时长  -->
              <view class="bottom">
                <view class="voice">
                  <image src="/static/images/Slice Copy 2@2x.png" class='icon_sound'></image>
                  <!-- <image src="../images/Slice Copy 3@2x.png" class='icon_voice'></image> -->
                </view>

                <view class="voice_count">123</view>
              </view>
              <!--评论收听区  -->



            </view>
          </view>
        </view>
        <!--结束  -->


        <view class="my_repaly">
          <view class="my_repaly_top">
            <!--头像区  -->
            <view class="headerPic">
              <image src="/static/images/Slice 2@2x.png" class="icon_img"></image>
            </view>
            <!--语音内容区  -->
            <view class="message">
              <!--昵称时间  -->
              <view class="top">
                <view class="nickname">小仙女</view>
                <view class="time">03-08 17:33</view>
              </view>
              <!--语音内容时长  -->
              <view class="bottom">
                <view class="voice">
                  <image src="/static/images/Slice Copy 2@2x.png" class='icon_sound'></image>
                  <!-- <image src="../images/Slice Copy 3@2x.png" class='icon_voice'></image> -->
                </view>

                <view class="voice_count">123</view>
              </view>
              <!--评论收听区  -->



            </view>
          </view>

        </view>
        <!--结束  -->

        <view class="my_repaly">
          <view class="my_repaly_top">
            <!--头像区  -->
            <view class="headerPic">
              <image src="/static/images/Slice 2@2x.png" class="icon_img"></image>
            </view>
            <!--语音内容区  -->
            <view class="message">
              <!--昵称时间  -->
              <view class="top">
                <view class="nickname">小仙女</view>
                <view class="time">03-08 17:33</view>
              </view>
              <!--语音内容时长  -->
              <view class="bottom">
                <view class="voice">
                  <image src="/static/images/Slice Copy 2@2x.png" class='icon_sound'></image>
                  <!-- <image src="../images/Slice Copy 3@2x.png" class='icon_voice'></image> -->
                </view>

                <view class="voice_count">123</view>
              </view>
              <!--评论收听区  -->



            </view>
          </view>

        </view>
        <!--结束  -->

        <view class="my_repaly">
          <view class="my_repaly_top">
            <!--头像区  -->
            <view class="headerPic">
              <image src="/static/images/Slice 2@2x.png" class="icon_img"></image>
            </view>
            <!--语音内容区  -->
            <view class="message">
              <!--昵称时间  -->
              <view class="top">
                <view class="nickname">小仙女</view>
                <view class="time">03-08 17:33</view>
              </view>
              <!--语音内容时长  -->
              <view class="bottom">
                <view class="voice">
                  <image src="/static/images/Slice Copy 2@2x.png" class='icon_sound'></image>
                  <!-- <image src="../images/Slice Copy 3@2x.png" class='icon_voice'></image> -->
                </view>

                <view class="voice_count">123</view>
              </view>
              <!--评论收听区  -->



            </view>
          </view>

        </view>
        <!--结束  -->

      </view>
    </view>
    <view class='footer'>
      <button class="record_btn" type="default" size="default">
        <view class="left_pic">
          <image src="/static/images/luyin Copy@3x.png.png" class="icon_record"></image>
        </view>
        <view class="right_font">按住说话</view>
      </button>

    </view>
  </div>
</template>

<script>
  import tag from '@/components/tag'
  import {wxutil} from "../../utils/wxutils";
  import {api} from "../../utils/api";
  import {info} from "../../utils/userinfo";
  export default {

  }
</script>

<style scoped>
  .main {
    padding-bottom: 110rpx;
  }

  /*间隔view  */

  .interval {
    width: 100%;
    height: 20rpx;
    background: #eee;
  }

  /*回复区高度自适应  */

  .height_auto {
    height: auto !important;
  }

  /*语音内容区  */

  .sound_content {
    width: 100%;
    height: 232rpx;
    background: #fff;
    padding-left: 30rpx;
    box-sizing: border-box;
  }

  /* 分割线上层*/

  .sound_content_top {
    width: 100%;
    height: 146rpx;
    border-bottom: 1rpx solid #eee;
  }

  .del_border {
    border: none !important;
  }

  /*头像  */

  .headerPic {
    width: 94rpx;
    height: 142rpx;
    float: left;
    padding-top: 40rpx;
    padding-bottom: 30rpx;
    box-sizing: border-box;
  }

  /*具体内容  */

  .message {
    width: 626rpx;
    float: left;
  }

  /*昵称时间  */

  .message .top {
    width: 100%;
    height: 68rpx;
  }

  .nickname {
    padding: 20rpx 40rpx 8rpx 0;
    box-sizing: border-box;
    font-size: 28rpx;
    float: left;
    color: #666;
  }

  .time {
    padding: 24rpx 0 10rpx 0;
    box-sizing: border-box;
    font-size: 12px;
    color: #999;
    float: left;
  }

  /*语音内容 时长  */

  .message .bottom {
    width: 100%;
    height: 80rpx;
    float: left;
  }

  .voice {
    background: #fff;
    border: 1rpx solid #999;
    border-radius: 4px;
    height: 60rpx;
    float: left;
    padding: 10rpx;
    box-sizing: border-box;
    margin-right: 20rpx;
  }

  /*声波的图片  */

  .icon_sound {
    margin-right: 8rpx;
  }

  .icon_sound {
    width: 40rpx;
    height: 40rpx;
  }

  /*时长  */

  .voice_count {
    height: 78rpx;
    font-size: 24rpx;
    color: #999;
    line-height: 60rpx;
    float: left;
  }

  /*评论收听  */

  .sound_content_bottom {
    height: 74rpx;
    box-sizing: border-box;
    width: 100%;
  }

  /*评论 收听 */

  .listen, .comment {
    height: 74rpx;
    padding: 22rpx 0 20rpx 0;
    box-sizing: border-box;
    float: left;
  }

  .comment {
    margin-right: 58rpx;
  }

  /*  */

  .comm_view {
    margin-bottom: 22rpx;
    float: left;
    font-size: 12px;
    color: #666;
  }

  /*评论收听图标  */

  .icon_comment, .icon_listen {
    width: 40rpx;
    height: 40rpx;
    margin-right: 22rpx;
  }

  /*头像的图片设置  */

  .icon_img {
    width: 72rpx;
    height: 72rpx;
    border-radius: 36rpx;
    border: 1rpx solid #eee;
  }

  .test {
    float: right;
    height: 74rpx;
    margin-right: 40rpx;
  }

  .remind {
    width: 100%;
    height: 60rpx;
    background: #ef8563;
    font-size: 28rpx;
    color: #fff;
    text-align: center;
    line-height: 60rpx;
  }

  .replay {
    width: 100%;
    height: auto;
  }

  /*我的评论  */

  .my_repaly, .owner_repaly {
    width: 100%;
    height: 146rpx;
    border-bottom: 1rpx solid #fff;
    margin-top: 16rpx;
    padding-left: 40rpx;
    padding-right: 40rpx;
    box-sizing: border-box;
  }

  /* 分割线上层*/

  .my_repaly_top {
    width: 100%;
    height: 146rpx;
    border-bottom: 1rpx solid #eee;
  }

  /*头像  */

  .my_repaly_top .headerPic {
    float: right;
  }

  /*具体内容  */

  .my_repaly_top .message {
    width: 570rpx;
    float: right;
  }

  .my_repaly_top .nickname {
    padding: 20rpx 0 8rpx 40rpx;
    float: right;
  }

  .my_repaly .time {
    padding: 24rpx 0 10rpx 0;
    float: right;
  }

  /*语音内容 时长  */

  my_repaly .message .bottom {
    float: right;
  }

  .my_repaly .voice {
    float: right;
    padding: 10rpx 0 10rpx 10rpx;
    box-sizing: border-box;
    margin-left: 20rpx;
    margin-right: 0;
  }

  /*声波的图片  */

  .icon_sound {
    margin-right: 8rpx;
  }

  .my_repaly .icon_sound {
    transform: rotate(180deg);
  }

  /*时长  */

  .my_repaly .voice_count {
    float: right;
  }

  /*头像的图片设置  */

  .my_repaly .icon_img {
    /* width: 72rpx;
    height: 72rpx;
    border-radius: 36rpx;
    border: 1rpx solid #eee; */
    margin-left: 20rpx;
  }

  .owner_repaly {
    margin-top: 0;
  }

  .owner_repaly .message {
    width: 570rpx;
  }

  /*底部固定区  */

  .footer {
    width: 100%;
    height: 98rpx;
    position: fixed;
    z-index: 12;
    bottom: 0;
    background: #eee;
    padding: 18rpx 158rpx 16rpx 160rpx;
    box-sizing: border-box;
  }

  .footer .record_btn {
    background: #fff;
    border: 0 solid #666;
    border-radius: 8rpx;
    height: 64rpx;
    line-height: 64rpx;
    font-size: 24rpx;
  }

  .record_btn::after {
    line-height: 64rpx;
  }

  .icon_record {
    width: 48rpx;
    height: 48rpx;
    margin-top: 8rpx;
    padding-right: 20rpx;
  }

  .left_pic {
    float: left;
    margin-left: 90rpx;
  }

  .right_font {
    float: left;
    font-size: 24rpx;
    color: #666;
  }

</style>
